<template>
	<view class="phone-content" v-if="hasResult">
		<view class="result-content">
			<view class="userinfo-box">
        <view class="content-item">
          <view class="item-title first">您的号码</view>
          <view class="item-content first">{{phone}}</view>
        </view>
        <view class="content-item">
          <view class="item-title second">数字磁场组合</view>
          <view class="item-content second">
            <span>({{result[0].num}}){{result[0].auspicious}}</span>
            <span>、</span>
            <span>({{result[1].num}}){{result[1].auspicious}}</span>
          </view>
        </view>
        <view class="content-item">
          <view class="item-title first">({{result[0].num}})磁场特征</view>
          <view class="item-content first">
            <view>{{result[0].content}}</view>
          </view>
        </view>
        <view class="content-item">
          <view class="item-title second">({{result[1].num}})磁场特征</view>
          <view class="item-content second">
            <view>{{result[1].content}}</view>
          </view>
        </view>
			</view>
      <view>
        <uni-collapse class="tips" ref="collapse" v-model="value">
          <uni-collapse-item title="您的号码对您的影响总体分析：" >
            <view class="content">
              <text class="text">{{result[2].content}}</text>
            </view>
          </uni-collapse-item>
        </uni-collapse>
      </view>
		</view>
	</view>
</template>

<script>
	export default {
    name: 'phoneResult',
    props: {
      userInfo: {},
      result: {}
    },
		data() {
			return {
				hasResult: false,
        query: null,
        value: ['0'],
        phone: ''
			}
		},
		mounted() {
      this.load()
		},
		methods: {
      load() {
        uni.showLoading({
        	title: '加载中'
        });
        if (this.result && this.userInfo){
          this.phone = this.userInfo.calculatePhone;
          uni.hideLoading();
          this.hasResult = true;
          
        }else{
        	uni.showToast({
        		title: '订单编号不存在',
        		icon: 'none'
        	});
        }
      }
		}
	}
</script>

<style lang="scss" scoped>
.phone-content {
  height: 100%;
}
.notpay {
	background-color: #000000;
	opacity: 0.8;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.notpay-btn {
  width: 481rpx;
  height: 60rpx;
  background-color: #8e5632;
  border-radius: 30rpx;
  font-size: 32rpx;
  font-weight: normal;
  line-height: 59rpx;
  color: #ffffff;
  text-align: center;
}
.result-content {
  box-sizing: border-box;
  width: 100%;
  padding: 50rpx 50rpx 90rpx;
  font-size: 30rpx;
  line-height: 52rpx;
}
.userinfo-box {
  padding-bottom: 20rpx;
}
.content-item {
  display: table-row;
}
.item-title {
  width: 30%;
  text-align: center;
  font-size: 28rpx;
  color: #333333;
  font-weight: bold;
  padding: 10rpx 10rpx;
  border: 2rpx solid #e6d7b3;
  display: table-cell;
  vertical-align: middle;
}
.item-content {
  width: 70%;
  text-align: left;
  color: #333333;
  font-size: 26rpx;
  padding: 10rpx 20rpx;
  border: 2rpx solid #e6d7b3;
  display: table-cell;
}
.first {
  background-color: #ffffff;
}
.second {
  background-color: #F7EFDC;
}
.tips {
  font-size: 30rpx;
  color: #333333;
  margin-bottom: 30rpx;
  border: 2rpx solid #E6D7B3;
  ::v-deep .label-text {
  	font-size: 28rpx;
  }
  ::v-deep .uni-collapse-item__title {
    background-color: #f7ead8;
  }
  ::v-deep .uni-collapse-item__title-box {
    background-color: #f7ead8;
  }
  // ::v-deep .uni-collapse-item__title-wrap {
  //   background-color: #f7ead8;
  // }
  ::v-deep .uni-collapse-item__title-text {
    color: #3b1b06;
    font-size: 28rpx;
    font-weight: 700;
  }
}
.content {
  padding: 30rpx;
}
</style>